<template>
	<view>
		<view class="head flex-row">
			<view v-for="item in members" :key="item" class="item flex-column">
				<xbc-avatar :src="item.userAvatar" :radius="0" />
				<view class="name text-ellipsis">{{ item.userName }}</view>
			</view>
			<view @tap="toPage('member')" class="item flex-column">
				<view class="block flex-column">
					<text class="iconfont icon-more"></text>
				</view>
				<view class="name text-ellipsis">更多</view>
			</view>
			<view @tap="toAdd" class="item flex-column">
				<view class="block flex-column">
					<text class="iconfont icon-plus"></text>
				</view>
				<view class="name text-ellipsis">添加</view>
			</view>
		</view>
		<view class="row flex-row">
			<text class="label">群聊头像</text>
			<view class="flex-row">
				<xbc-avatar :src="group.avatar" size="28px" group />
			</view>
		</view>
		<view class="row flex-row">
			<text class="label">群聊名称</text>
			<view class="input">{{ group.name }}</view>
		</view>
		<view class="space"></view>
		<view @tap="sendMessage" v-if="conversation.source == 'list'" class="btn flex-column">发送消息</view>
		<view @tap="clearMessage" class="btn flex-column">清空聊天记录</view>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
export default{
	data(){
		return {
			group: {},
			members: [],
			eventChannel: null,
			conversation: uni.getStorageSync('currentConversation')
		}
	},
	onLoad(){
		this.eventChannel = this.getOpenerEventChannel()
		this.getGroup()
		this.getMembers()
	},
	methods: {
		toPage(name) {
			uni.navigateTo({
				url: `/pages/contact/group/${name}`
			})
		},
		// 清空聊天记录
		clearMessage() {
			uni.showModal({
				title: '提示',
				content: '是否确认清空聊天记录',
				success(res){
					if(res.cancel) return
					const { conversationId, type } = this.conversation
					XBCIM.clearConversation({
						conversationId,
						conversationType: type
					}).then(() => {
						this.eventChannel.emit('clearMessage')
						uni.showToast({
							icon: 'none',
							title: '聊天记录删除成功'
						})
					}).catch(() => {
						uni.showToast({
							icon: 'none',
							title: '聊天记录删除失败'
						})
					})
				}
			})
		},
		// 添加
		toAdd() {
			uni.showToast({
				icon: 'none',
				title: '演示版本不支持新增'
			})
		},
		// 发送消息
		sendMessage() {
			if(!this.conversation.source || this.conversation.source != 'list') return
			const groupConversation = {
				...this.group,
				type: XBCIM.CONVERSATION_TYPE.GROUP,
				targetId: this.conversation.groupId
			}
			uni.setStorageSync('currentConversation', groupConversation)
			uni.redirectTo({
				url: `/pages/chat/group?id=${this.conversation.groupId}`
			})
		},
		// 获取群详情
		async getGroup() {
			this.group = await XBCIM.getGroupDetail({
				groupId: this.conversation?.groupId
			})
		},
		// 获取群成员
		async getMembers() {
			const res = await XBCIM.getGroupMemberList({
				groupId: this.conversation?.groupId,
				pageSize: 3
			})
			this.members = res?.list || []
		}
		
	}
}
</script>

<style lang="scss" scoped>
.space {
	height: 20rpx;
	margin: 30rpx 0 100rpx;
	background-color: #f5f5f5;
}
.btn {
	color: red;
	height: 80rpx;
	margin: 40rpx;
	font-size: 32rpx;
}

.row {
	height: 92rpx;
	padding: 0 40rpx;
	
	.label {
		font-size: 30rpx;
	}
	
	.iconfont {
		color: #666;
		font-size: 36rpx;
	}
	
	.input {
		font-size: 28rpx;
		text-align: right;
	}
}

.head {
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;
	
	.name {
		font-size: 24rpx;
		margin-top: 4rpx;
	}
	
	.block {
		border: 2rpx solid #eee;
		@include fullsize(88rpx);
		
		.iconfont {
			color: #999;
		}
	}
}
</style>